﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../assets/css/yui-cssgrids-min.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
    <link rel="shortcut icon" type="image/x-icon" href="../assets/favicon.ico">
    <script src="../assets/js/yui-source.js"></script>
	<title>TweenJS v1.0.0 API Documentation : TweenJS</title>
</head>
<body class="yui3-skin-sam">

<div id="doc">
    <div id="hd" class="yui3-g header">
        <div class="yui3-u-3-4">
            
                <h1><a href="/tweenjs"><img src="../assets/docs-icon-TweenJS.png" title="TweenJS"></a></h1>
            
        </div>
        <div class="yui3-u-1-4 version">
            <em>API Documentation for: 1.0.0</em>
        </div>
    </div>
    <div id="bd" class="yui3-g">

        <div class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">
    <h2 class="off-left">APIs</h2>
    <div id="api-tabview" class="tabview">
        <ul class="tabs">
            <li><a href="#api-classes">Classes</a></li>
        </ul>

        <div id="api-tabview-filter">
            <input type="search" id="api-filter" placeholder="Type to filter APIs">
        </div>

        <div id="api-tabview-panel">
            <ul id="api-classes" class="apis classes">
            
                <li><a href="../classes/AbstractTween.html">AbstractTween</a></li>
            
                <li><a href="../classes/ColorPlugin.html">ColorPlugin</a></li>
            
                <li><a href="../classes/CSSPlugin.html">CSSPlugin</a></li>
            
                <li><a href="../classes/Ease.html">Ease</a></li>
            
                <li><a href="../classes/Event.html">Event</a></li>
            
                <li><a href="../classes/EventDispatcher.html">EventDispatcher</a></li>
            
                <li><a href="../classes/MotionGuidePlugin.html">MotionGuidePlugin</a></li>
            
                <li><a href="../classes/RelativePlugin.html">RelativePlugin</a></li>
            
                <li><a href="../classes/RotationPlugin.html">RotationPlugin</a></li>
            
                <li><a href="../classes/SamplePlugin.html">SamplePlugin</a></li>
            
                <li><a href="../classes/Ticker.html">Ticker</a></li>
            
                <li><a href="../classes/Timeline.html">Timeline</a></li>
            
                <li><a href="../classes/Tween.html">Tween</a></li>
            
                <li><a href="../classes/TweenJS.html">TweenJS</a></li>
            
                <li><a href="../classes/Utility Methods.html">Utility Methods</a></li>
            
            </ul>

            <ul id="api-modules" class="apis modules">
            
                <li><a href="CreateJS.html">CreateJS</a></li>
            
                <li><a href="EaselJS.html">EaselJS</a></li>
            
                <li><a href="TweenJS.html">TweenJS</a></li>
            
            </ul>
        </div>
    </div>
</div>

            </div>
        </div>
        <div class="yui3-u-3-4">
            <div id="api-options">
        Show:
        <label for="api-show-inherited">
            <input type="checkbox" id="api-show-inherited" checked="">
            Inherited
        </label>

        <label for="api-show-protected">
            <input type="checkbox" id="api-show-protected">
            Protected
        </label>

        <label for="api-show-private">
            <input type="checkbox" id="api-show-private">
            Private
        </label>
        <label for="api-show-deprecated">
            <input type="checkbox" id="api-show-deprecated">
            Deprecated
        </label>

    </div>
            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
                        <h1>TweenJS Module</h1>
<div class="box clearfix meta">
    

    

    
        <div class="foundat">
            Defined in: <a href="../files/tweenjs_version.js.html#l9"><code>TweenJS:9</code></a>
        </div>
    

    
</div>



<div class="box intro">
    <p>The TweenJS Javascript library provides a simple but powerful tweening interface. It supports tweening of both
numeric object properties &amp; CSS style properties, and allows you to chain tweens and actions together to create
complex sequences.</p>
<p><h4>Simple Tween</h4>
This tween will tween the target&#39;s alpha property from 0 to 1 for 1000ms (1 second) then call the <code>handleComplete</code> function.
<pre class="code prettyprint"><code>    target.alpha = 0;
    createjs.Tween.get(target).to({alpha:1}, 1000).call(handleComplete);
    function handleComplete() {
        //Tween complete
    }</code></pre>
<p><strong>Arguments and Scope</strong>
Tween also supports a <code>call()</code> with arguments and/or a scope. If no scope is passed, then the function is called
anonymously (normal JavaScript behaviour). The scope is useful for maintaining scope when doing object-oriented
style development.</p>
<pre class="code prettyprint"><code> createjs.Tween.get(target).to({alpha:0})
     .call(handleComplete, [argument1, argument2], this);</code></pre>
<p><h4>Chainable Tween</h4>
This tween will wait 0.5s, tween the target&#39;s alpha property to 0 over 1s, set it&#39;s visible to false, then call the
<code>handleComplete</code> function.
<pre class="code prettyprint"><code>    target.alpha = 1;
    createjs.Tween.get(target).wait(500).to({alpha:0, visible:false}, 1000).call(handleComplete);
    function handleComplete() {
        //Tween complete
    }</code></pre>
<p><h4>Browser Support</h4>
TweenJS will work in all browsers.

</div>



<div class="yui3-g">
    <div class="yui3-u-1-2">
        
            <p>This module provides the following classes:</p>

            <ul class="module-classes">
            
                <li class="module-class">
                    <a href="../classes/ColorPlugin.html">
                        ColorPlugin
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/CSSPlugin.html">
                        CSSPlugin
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/Ease.html">
                        Ease
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/MotionGuidePlugin.html">
                        MotionGuidePlugin
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/RelativePlugin.html">
                        RelativePlugin
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/RotationPlugin.html">
                        RotationPlugin
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/SamplePlugin.html">
                        SamplePlugin
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/Timeline.html">
                        Timeline
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/Tween.html">
                        Tween
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/TweenJS.html">
                        TweenJS
                    </a>
                </li>
            
            </ul>
        
    </div>

    <div class="yui3-u-1-2">
        
    </div>
</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
</body>
</html>
